import XtxMessage from './message.vue'
import { h, render } from 'vue'

type Props = {
  type: 'success' | 'error' | 'warning'
  text: string
  time: number
}
const div = document.createElement('div')
div.className = 'xtx-message-container'
document.body.appendChild(div)

let timer: number = -1
export default function Message({ type, text, time = 2000 }: Props) {
  clearTimeout(timer)
  const vNode = h(XtxMessage, { type: type, text: text })
  render(vNode, div)
  timer = window.setTimeout(() => {
    render(null, div)
  }, time);
}
Message.error = function (text: string, time = 2000) {
  Message({
    type: 'error',
    text,
    time,
  })
}
Message.success = function (text: string, time = 2000) {
  Message({
    type: 'success',
    text,
    time,
  })
}
Message.warning = function (text: string, time = 2000) {
  Message({
    type: 'warning',
    text,
    time,
  })
}